import React, { Component } from 'react';

import { GowuCss } from './style';
import a from '../../session';

class index extends Component {
    state = {
        car: [],
        zongji: 0.00
    }
    componentDidMount() {
        let car = a.get('car')
        this.setState({
            car
        })
        this.zongji()
    }
    // 全选
    setCar = (e, type) => {
        let car = a.get('car')
        let newcar = car.map(item => {
            // 全选操作
            type === 'quanx' && (e.target.checked ? item.checked = true : item.checked = false)
            // 单选
            type === 'danxuan' && e.target.value === item.productSn && (item.checked = e.target.checked)
            // 数量 加
            type === 'jia' && e === item.productSn && item.count < 20 && ++item.count
            // 数量 减
            type === 'jian' && e === item.productSn && item.count > 1 && --item.count
            return item
        })
        a.set('car', newcar)
        this.setState({ car: newcar })
        this.zongji()
    }

    // 总计
    zongji = () => {
        let zongji = 0
        let car = [...a.get('car')] || []
        car.length > 0&& car.map(item => {
            if (item.checked) {
                zongji += item.count * item.promotionPrice
            }
        })
        zongji = zongji.toFixed(2)
        this.setState({
            zongji
        })
    }
    render() {
        return (
            <GowuCss>
                <div className='top_box'>
                    <span></span>
                    <div>购物车</div>
                    <span>编辑</span>
                </div>
                <div className='info_box'>
                    <p className='info_top'>
                        <input type="checkbox" onChange={(e) => this.setCar(e, 'quanx')} />
                        <span>全部</span>
                    </p>
                    <div className='sp_box'>
                        {
                            this.state.car.length !== 0
                                ?
                                this.state.car.map(r => (
                                    <div key={r.productSn} className='info_sp'>
                                        <div className='info_inp'>
                                            <input type="checkbox"
                                                value={r.productSn}
                                                checked={r.checked}
                                                onChange={(e) => this.setCar(e, 'danxuan')}
                                            />
                                        </div>
                                        <div className='sp_lef'>
                                            <img src={r.pic} alt="" />
                                        </div>
                                        <div className='sp_rig'>
                                            <p className='p1'>{r.name}</p>
                                            <p className='p2'>{r.subTitle}</p>
                                            <p className='p3'>
                                                <span className='s1'>￥{r.promotionPrice}</span>
                                                <span className='s2'>数量：
                                                    <button
                                                        onClick={() => this.setCar(r.productSn, 'jia')}
                                                    >
                                                        +
                                                    </button>
                                                        {r.count}
                                                    <button
                                                        onClick={() => this.setCar(r.productSn, 'jian')}
                                                    >
                                                        -
                                                    </button>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                ))
                                :
                                <div className='wusp'>
                                    <div>
                                        <img src="https://m.flyco.com/webpack/20210702172411221/img/is_empty.008b534a.png" alt="" />
                                        <p> 你的购物车空空如也~ </p>
                                    </div>
                                </div>
                        }
                    </div>
                    <div className='zongji'>
                        <div className='inpu'>
                            {/* <input type="checkbox" />
                            &nbsp; 全选 */}
                        </div>
                        <div className='jiesuan'>
                            <div className='heji'>
                                合计：<span>￥{this.state.zongji}</span>
                            </div>
                            <div className='btn'>
                                结算
                            </div>
                        </div>
                    </div>
                </div>
            </GowuCss>
        );
    }
}

export default index;
